/* 防止一些公共的样式 */
/* 先取消页面固定格式 */
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;/*委屈自己*/
}

/* 给整体设置一个背景图片,和浏览器一面一样大 */
html,body{
    width: 100%;
    height: 100%;
    background-image: url(./beauty.JPG);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* 导航栏设置样式 */
.nav{
    /* 设置宽高和浏览器一样 */
    height: 40px;
    width: 100%;
    background-color: rgba(106, 102, 107,0.6);
    color: white;
    /* 使用弹性布局实现元素能够水平排列 */
    display: flex;
    /* 水平方向上的排列 */
    justify-content: flex-start;
    /* 实现元素垂直居中 */
    align-items: center;
}



.nav  img{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    /* 让图片距离左边界有一定的距离 */
    margin-left:30px;
    /* 让图片距离右边的文字也有一定的距离 */
    margin-right: 10px;
}

/* 设置空白标签用来占空间把右边的元素挤走 */
.nav .spacer{
    width: 75%;
}

.nav a{
    /* 取消下划线 */
    text-decoration: none;
    /* 右边距使得几个链接分开 */
    margin-right: 20px;
    color: white;
}


/* 鼠标移动到链接就变色 */
.nav a:hover{
    color: rgb(57, 51, 220);
}




/* 版心 */
.container{
    width: 1000px;
    /* 这里注意减号两边要带上空格 */
    height: calc(100% - 40px);
    /* 设置整个版心水平居中 */
    margin: 0 auto;
    /* 让左右两个单元水平排列 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.container .left{
    width: 125px;
    height: 100%;
}

.container .right{
    width: 870px;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    /* 设置右边的滚动条,防止内容溢出 */
    overflow: auto;
}

/* 这是个人标签,显示用户信息 */
.card{
    padding: 10px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    /* 让内容水平居中 */
    text-align: center;
    align-items: center;
}

.card img{
    width: 100px;
    height: 100px;
    /* 因为图片本身就是圆的,所以不用设置了 */
    /* border-radius: 50%; */
}

.card .name{
    /* 水平居中 */
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
}

.card a{
    text-decoration: none;
    color: rgb(169, 166, 166);
}

.card a:hover{
    color: rgb(57, 51, 220);
}

.card .counter{
    margin-top: 8px;
    display: flex;
    justify-content: space-around;
}
